<html>
  <head>
    <title>Native Scrollbar Test</title>
    <style>
      dt {font-weight: bolder}
    </style>
  </head>
<body>

  <h1>Native Scrollbar Test</h1>

  <p>This tests a browser's ability to show a native scrollbar within an SVG
  foreignObject container.</p>

  <object data="native_scrollbar_test.svg" height=200 width=200 type="image/svg+xml" style="border: 1px solid black"></object>

  <h3>Expected Behaviour</h3>

  <p>There should be a red square in the background.
  A vertical scrollbar runs across the square.
  The scrollbar can be manipulated using the mouse.</p>

  <h3>Observed Behaviour</h3>
  <dl>
    <dt>Firefox 10.0 (OS X)</dt>
    <dd>Correct rendering.</dd>
    <dd>Correct interaction.</dd>
    <dt>Chrome 17.0 (OS X) -- <a href="http://code.google.com/p/chromium/issues/detail?id=116908">Issue 116908</a></dt>
    <dd>Correct rendering.</dd>
    <dd>Scrollbar may not be manipulated where it crosses the red square.  The square appears to eat the mouse events.</dd>
    <dt>Safari 5.1 (OS X) -- Issue 10990268</dt>
    <dd>The red square is drawn in front of the scrollbar.</dd>
    <dd>Scrollbar may not be manipulated where it crosses the red square.</dd>
    <dt>Opera 10.0 (OS X) -- Issue DSK-358786</dt>
    <dd>Correct rendering.</dd>
    <dd>Scrollbar may not be manipulated at all.</dd>
    <dt>IE 9.0 (Win 7)</dt>
    <dd>No scrollbar rendered.</dd>
    <dd>No scrollbar interaction.</dd>
  </dl>
</body>
</html>